<template>
  <div class="header flex">
    <FormSearch
        :formFields="searchList"
        @search="Search"
        @reset="Search"
    ></FormSearch>
  </div>
  <a-table
      :columns="columns"
      :data-source="state.data"
      :pagination="state.pagination"
      @change="pageChange"
      :loading="state.loading"
      :scroll="{ x: 1200 }"
      rowKey="goods_id"
  >
    <template #bodyCell="{ record, column }">
      <template v-if="column.dataIndex === 'goods_info'">
        <div class="flex gap">
          <a-image :width="100" :src="record.goods_img" class="image"/>
          <div class="good-name">
            <a-tooltip>
              <template #title>{{ record.goods_name }}</template>
              {{ record.goods_name }}
            </a-tooltip>
          </div>
        </div>
      </template>
      <template v-if="column.dataIndex === 'status'">
        <a-switch
            v-model:checked="record.status"
            checked-children="开启"
            un-checked-children="关闭"
            :checkedValue="1"
            :unCheckedValue="0"
            @change="changeSwitch(record)"
        />
      </template>
      <template v-if="column.dataIndex === 'actions'">
        <a-space size="small">
          <a-button
              type="link"
              v-if="(goods_type == 1||goods_type==2||goods_type==5) && record.is_virtually == 1"
              @click="addVirtuallyCard(record)"
          >添加卡号
          </a-button
          >
          <a-button
              type="link"
              v-if="(goods_type == 1||goods_type==2||goods_type==5)&& record.is_virtually == 1"
              @click="checkVirtuallyCard(record)"
          >查看卡号
          </a-button
          >
          <a-button
              type="link"
              v-if="
              (goods_type == 1||goods_type==2||goods_type==5) &&
              record.is_virtually == 1 &&
              record.is_auto_send === 0
            "
              @click="handleSetVAutoSend(record)"
          >设置自动发货
          </a-button>

          <a-button
              type="link"
              v-if="
              (goods_type == 1||goods_type==2||goods_type==5) &&
              record.is_virtually == 1 &&
              record.is_auto_send === 1
            "
              @click="handleSetVAutoSend(record)"
          >取消自动发货
          </a-button>
          <a-button type="link" @click="handleEdit(record)">编辑</a-button>
          <a-popconfirm
              title="你确定要删除吗?"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleDelete(record)"
          >
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
  <!--  弹出框-->
  <create-edit ref="createRef" @model-success="refresh"/>
  <VirtuallyCard ref="cardRef" @model-success="refresh"/>
  <virtually-card-table ref="virtuallyRef"/>
</template>
<script setup>
import {reactive, ref} from "vue";
import CreateEdit from "./CreateEdit.vue";
import VirtuallyCard from "./VirtuallyCard.vue";
import VirtuallyCardTable from "./VirtuallyCardTable.vue";
import {list, del, open, setVAutoSend} from "@/api/goods/goods";
import {all as cateAll} from "@/api/goods/cate";
import {all as labelAll} from "@/api/goods/label";
import {all as serviceAll} from "@/api/goods/service";
import {message} from "ant-design-vue";

const props = defineProps({
  goods_type: {
    type: Number,
    default: 1,
  },
});

const cardRef = ref();
const virtuallyRef = ref();

const columns = [
  {
    title: "id",
    dataIndex: "goods_id",
    width: 100,
  },
  {
    title: "商品编号",
    dataIndex: "goods_no",
    width: 150,
    align:'center',
    customRender(record) {
      return record.value || "-";
    },
  },
  {
    title: "商品信息",
    dataIndex: "goods_info",
    width:300,
    align:'center',
  },
  {
    title: "提货类型",
    dataIndex: "shop_type",
    width: 120,
    align:'center',
    customRender(record) {
      return record.value == 0 ? "快递" : record.value == 1 ? "自提" : "--";
    },
  },
  {
    title: "库存",
    dataIndex: "stock_num",
    width: 120,
    align:'center',
  },
  {
    title: "虚拟销量",
    dataIndex: "goods_unsales",
    width: 100,
    align:'center',
  },
  {
    title: "成本价",
    dataIndex: "cost_price",
    width: 150,
    align:'center',
    customRender(record) {
      return record.value ? "￥" + record.value : "-";
    },
  },
  {
    title: "商品价格",
    dataIndex: "goods_price",
    width: 100,
    align:'center',
    customRender(record) {
      return record.value ? "￥" + record.value : "-";
    },
  },
  {
    title: "排序",
    dataIndex: "sort",
    width: 100,
    align:'center'
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 200,
    align:'center',

  },
  {
    title: "状态",
    dataIndex: "status",
    width: 100,
    align:'center',

  },
  {
    title: "操作",
    dataIndex: "actions",
    width: 350,
    align:'center',
    fixed: "right",

  },
];
//弹出框的ref
const createRef = ref();
//搜索框数据
const searchList = reactive([
  {
    type: "input", //类型
    label: "商品名称", //标签
    name: "name", //字段
    value: "",
    placeholder: "输入商品名称",
  },
  {
    type: "input", //类型
    label: "商品编号", //标签
    name: "goods_no", //字段
    value: "",
    placeholder: "输入商品编号",
  },
  {
    type: "select", //类型
    label: "商品分类", //标签
    name: "cate_id", //字段
    value: null,
    placeholder: "请选择商品分类",
    allowClear: true,
    options: [],
  },
  {
    type: "select", //类型
    label: "商品标签", //标签
    name: "label_id", //字段
    value: null,
    placeholder: "请选择商品标签",
    allowClear: true,
    options: [],
  },
  {
    type: "select", //类型
    label: "商品服务", //标签
    name: "service_id", //字段
    value: null,
    placeholder: "请选择商品服务",
    allowClear: true,
    options: [],
  },
  {
    type: "select",
    label: "提货类型",
    name: "shop_type",
    value: null,
    placeholder: "请选择提货类型",
    allowClear: true,
    options: [
      {
        id: 1,
        name: "快递",
      },
      {
        id: 2,
        name: "自提",
      },
    ],
  },
  {
    type: "select",
    label: "状态",
    name: "status",
    value: null,
    placeholder: "请选择状态",
    allowClear: true,
    options: [
      {
        id: 1,
        name: "开启",
      },
      {
        id: 2,
        name: "关闭",
      },
    ],
  },
  {
    type: "switch", //类型
    label: "是否虚拟商品", //标签
    name: "is_virtually", //字段
    value: 0,
    checkedChildren: "是",
    unCheckedChildren: "否",
    checkedValue: 1,
    unCheckedValue: 0,
  }
]);

const state = reactive({
  data: [], //表格的数据
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
  }, //搜索数据
});
// 获取商品分类
const getCateAll = () => {
  cateAll().then((res) => {
    if (res.code == 0) {
      const data =
          res.data.map((item) => {
            return {
              id: item.cate_id,
              name: item.name,
            };
          }) || [];
      searchList.map((item) =>
          item.name == "cate_id" ? (item.options = data) : []
      );
    }
  });
};
// 商品标签
const getLabelAll = () => {
  labelAll().then((res) => {
    if (res.code == 0) {
      const data =
          res.data.map((item) => {
            return {
              id: item.label_id,
              name: item.name,
            };
          }) || [];
      searchList.map((item) =>
          item.name == "label_id" ? (item.options = data) : []
      );
    }
  });
};
// 商品服务
const getServiceAll = () => {
  serviceAll().then((res) => {
    if (res.code == 0) {
      const data =
          res.data.map((item) => {
            return {
              id: item.service_id,
              name: item.name,
            };
          }) || [];
      searchList.map((item) =>
          item.name == "service_id" ? (item.options = data) : []
      );
    }
  });
};
//获取列表的数据
const getList = () => {
  state.loading = true;
  list({
    goods_type: props.goods_type,
    ...state.searchParams
  }).then((res) => {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      state.loading = false;
      const data = res.data;
      state.data = data.data;
      state.pagination.total = data.total;
    }
  });
};
//分页变动数据
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  getList();
};
//删除
const handleDelete = (record) => {
  del({id: record.goods_id}).then(function (res) {
    if (res.code == 0) {
      message.success("删除成功");
      //重新加载数据
      getList();
    }
  });
};
const changeSwitch = (record) => {
  open({
    id: record.goods_id,
  }).then((res) => {
    if (res.code == 0) {
      message.success(res.msg);
      getList();
    }
  });
};
//搜索事件
const Search = (values) => {
  state.searchParams.page = 1;
  state.searchParams = {
    ...state.searchParams,
    ...values,
  };
  //搜索
  getList();
};
// 添加虚拟卡号
const addVirtuallyCard = (record) => {
  cardRef.value.show(record);
};
// 查看虚拟卡号
const checkVirtuallyCard = (record) => {
  virtuallyRef.value.show(record);
};
// 设置是否自动发货
const handleSetVAutoSend = (record) => {
  setVAutoSend({
    id: record.goods_id,
  }).then((res) => {
    if (res.code === 0) {
      message.success(res.msg);
      getList();
    }
  });
};
//编辑
const handleEdit = (record) => {
  createRef.value.show(record);
};
const refresh = () => {
  getList();
};

// 商品服务
getServiceAll();
// 商品标签
getLabelAll();
// 商品分类
getCateAll();
//获取列表
getList();

defineExpose({
  getList,
});
</script>
